<template>
  <el-dialog title="更新车辆"
             v-model="visible"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             @close="carVo = {}">
    <el-form ref="formRef" :model="carVo" label-width="120px" :rules="rules">
      <el-form-item label="车牌号:" prop="company_car_name">
        <el-input v-model.trim="carVo.company_car_name" placeholder="请输入车牌号"/>
      </el-form-item>
      <el-form-item label="所属公司:" prop="company_id">
        <company-selector v-model="carVo.company_id"/>
      </el-form-item>
      <el-form-item label="保养时间:" prop="company_car_bytime">
        <el-date-picker v-model="carVo.company_car_bytime" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD"/>
      </el-form-item>

      <el-form-item label="交强险到期时间:" prop="company_car_cbtime">
        <el-date-picker v-model="carVo.company_car_cbtime" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD"/>
      </el-form-item>
      <el-form-item label="商业险到期时间:" prop="company_car_cbtime">
        <el-date-picker v-model="carVo.company_car_sytime" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD"/>
      </el-form-item>
      <el-form-item label="停车费到期时间:" prop="company_car_cbtime">
        <el-date-picker v-model="carVo.company_car_tctime" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD"/>
      </el-form-item>
      <el-form-item label="年审时间" prop="company_car_nstime">
        <el-date-picker v-model="carVo.company_car_nstime" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD"/>
      </el-form-item>
      <template class="flex">
        <el-form-item label="车辆行驶证:" prop="company_car_xsz">
          <image-uploader v-model="carVo.company_car_xsz" alt="车辆行驶证"
                          v-model:company-id="carVo.company_id"/>
        </el-form-item>
        <el-form-item label="车辆外观图" prop="company_car_img">
          <image-uploader alt="车辆外观图" v-model:company-id="carVo.company_id" v-model="carVo.company_car_img"/>
        </el-form-item>
      </template>

      <el-form-item>
        <el-button class="ml-auto" type="primary" @click="submitForm">更新</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, useTemplateRef} from "vue";
import ImageUploader from "../../../components/ImageUploader.vue";
import type {CarVO} from "../../../types";
import {type FormRules, type FormInstance, ElMessage} from "element-plus"
import CompanySelector from "../../../components/CompanySelector.vue";
import {useMutation} from "@pinia/colada";
import {updateCar} from "../../../api/car.ts";

const visible = defineModel();
const carVo = defineModel<CarVO>("car", {
  default: {}
})
const formRef = useTemplateRef<FormInstance>('formRef')

const rules = ref<FormRules<CarVO>>({
  company_car_name: [
    {required: true, message: '请输入车牌号', trigger: 'blur'},
    {
      pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/,
      message: '请输入正确的车牌号'
    }
  ],
  company_id: [
    {required: true, message: '请选择所属公司', trigger: 'blur'}
  ]
})

const emits = defineEmits<{
  success: []
}>();

const submitForm = async () => {
  await formRef.value?.validate((valid) => {
    valid && insertCarFn(carVo.value)
  })
}

let {mutate: insertCarFn} = useMutation({
  mutation: (carVo: CarVO) => updateCar(carVo),
  onSuccess: () => {
    visible.value = false
    emits('success');
    carVo.value = {}
    ElMessage.success('更新车辆成功')
  },
  onError: () => {
    carVo.value = {}
    ElMessage.error('更新车辆失败')
  }
});

</script>

<style scoped>

</style>